<template>
  <a-drawer
    title="编辑院系专业招生计划"
    width=650
    placement="right"
    :closable="false"
    @close="onClose"
    :visible="officeEditVisiable"
    style="height: calc(100% - 55px);overflow: auto;padding-bottom: 53px;">
    <a-form :form="form">
      <a-row :gutter="48">
        <a-col :sm="{span:12}"  :md="{span:12}">
          <a-form-item label='院系' >
            <a-select :allowClear="true" showSearch optionFilterProp="children" @change="yxChange" disabled v-decorator="['zsyxm',{initialValue:postParams.zsyxm}]">
              <a-select-option v-for="i in selectMenu.yx" :key="i.id" :value="i.dwh">{{ i.dwh+"-"+ i.dwmc }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :sm="{span:12}"  :md="{span:12}">
          <a-form-item label='招生年度' >
            <a-select :allowClear="true"  showSearch optionFilterProp="children" disabled v-decorator="['zsnj',{initialValue:postParams.zsnj}]">
              <a-select-option v-for="i in TYPE0126" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :sm="{span:12}"  :md="{span:12}">
          <a-form-item label='专业' >
            <a-select :allowClear="true"  showSearch optionFilterProp="children"  disabled v-decorator="['zszym',{initialValue:postParams.zszym}]" @change="zyChange">
              <a-select-option v-for="i in selectMenu.zy" :key="i.id" :value="i.zyh">{{i.zyh+'-'+ i.zymc }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :sm="{span:12}"  :md="{span:12}">
          <a-form-item label='学习形式'>
            <a-select :allowClear="true" showSearch optionFilterProp="children" v-decorator="['qrzhfqrz',{initialValue:postParams.qrzhfqrz}]">
              <a-select-option v-for="i in selectMenu.xxlx" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :sm="{span:12}" :md="{span:12}">
          <a-form-item label='培养模式'>
            <a-select showSearch optionFilterProp="children" v-decorator="['pymsm',{initialValue:postParams.pymsm}]" disabled>
              <a-select-option v-for="i in selectMenu.zy" :key="i.id" :value="i.pymsm">{{ i.pymsmc }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :sm="{span:12}" :md="{span:12}">
          <a-form-item label='本专业计划数'>
            <a-input  v-decorator="['zszjhrs',{initialValue:postParams.zszjhrs}]" />
          </a-form-item>
        </a-col>
      </a-row>

      <a-form-item label='备注' style="margin-top:20px">
        <a-textarea placeholder="请输入..." v-decorator="['note',{initialValue:postParams.note}]"/>
      </a-form-item>
    </a-form>
    <div class="drawer-bootom-button">
      <a-button style="margin-right: .8rem" @click="onClose">取消</a-button>
      <a-button @click="handleSubmit" type="primary" :loading="loading">保存</a-button>
    </div>
  </a-drawer>
</template>

<script>
  // import moment from 'moment'
  import { STable } from '~'
  import { mapState } from 'vuex'

  const formItemLayout = {
    labelCol: { span: 3 },
    wrapperCol: { span: 18 }
  }

  const selectArr = ['TYPE0126', 'TYPE0075', 'TYPE0125', 'TYPE0072']
  export default {
    name: 'OfficeEdit',
    props: {
      info: {
        default: () => ({
          hzfs: '',
          zjh: '',
          fzyxwjh: '',
          zyxwjh: ''
        })
      },
      officeEditVisiable: {
        default: false
      }
    },
    components: {
      STable
    },
    data () {
      return {
        formItemLayout,
        loading: false,
        data: [],
        postParams: {
          hzfs: 'yx'
        },
        // 表头
        columns: [
          {
            title: '',
            dataIndex: 'column'
          },
          {
            title: '计划',
            scopedSlots: { customRender: 'plan' }
          }
        ],
        selectMenu: {
          yx: [], // 院系
          xxlx:[],
          zy:[]
        }
      }
    },
    beforeCreate() {
      this.form = this.$form.createForm(this)
    },
    computed: {
      ...mapState({
        systemInfo: state => state.app.systemInfo,
        TYPE0126: state => state.app['TYPE0126'] // 年级
      })
    },
    watch: {
      info (val) {

        this.postParams = {
          qrzhfqrz: val.qrzhfqrz,
          zszym:val.zszym,
          zsnj:val.zsnj,
          zsyxm:val.zsyxm,
          note:val.note,
          pymsm:val.pymsm,
          zszjhrs:val.zszjhrs
        }
        // for(var item in this.info){
        //   if(item == 'zsyxm' || item == 'zszym' || item == 'zsnj' || item == 'qrzhfqrz' || item == 'note' || item == 'id'){
        //     this.form.getFieldDecorator(item, {initialValue: this.info[item]})
        //   }
        // }
        this.getProfessionList(val.zsyxm)
        this.data = [{
          column: '总计划',
          plan:val.zszjhrs,
          key: 'zszjhrs'
        }]
      }
    },
    created () {
      this.initSelectMenu()
      selectArr.forEach(v => {
        this.$store.dispatch('app/setDictionary', v)
      })
    },
    methods: {
      initSelectMenu() {
        let allRequest = [
          this.$api.base.collegeAll()
        ]
        Promise.all(allRequest).then(res => {
          this.selectMenu.yx = res[0].data
          this.$api.base.dictionaryData('TYPE0441').then(res => {
            this.$set(this.selectMenu,'xxlx',res.data)
          })
        })

      },
      reset () {
        this.data = [{
          column: '总计划',
          plan: '',
          key: 'zjh'
        }]
      },
      // 选择院系
      yxChange (code) {
        this.getProfessionList(code)
      },
      getProfessionList(code){
        this.$api.base.majorAll({
          lsdwh: code
        }).then(res => {
          if (res.data) {
            this.$set(this.selectMenu,'zy',res.data)
          }
        })
      },
      // 选择招生年度
      zsndChange () {

      },
      // 关闭
      onClose () {
        this.reset()
        this.$emit('close')
      },
      zyChange(code){
        // console.log(this.form.getFieldDecorator().zszym)
        this.selectMenu.zy.forEach(item =>{
          if(code == item.zyh){
            this.form.setFieldsValue({'pymsm':item.pymsm})
          }
        })
      },
      // 保存
      handleSubmit () {
        let paramms = Object.assign({
          zsjhlxm: '02',
          id:this.info.id
        }, this.form.getFieldsValue())
        this.$api.recruitstat.disProsseionOfficeUpdate(paramms).then(res => {
          this.$emit('success')
        }).finally(() => {
          this.loadingBtn = false
        })
      },
      // 修改各计划人数人数
      handleChange (key, dataIndex, value) {
        const dataSource = [...this.data]
        const target = dataSource.find(item => item.key === key)
        if (target) {
          target[dataIndex] = value
          this.data = dataSource
        }
      }
    }
  }
</script>
